import { useState, useCallback } from 'react'
import { DragItem, DropResult } from '@/types/drag-drop'
import { FormattedContent, formatDragContent } from '@/services/dragContentFormatter'

interface DragDropState {
  isDragging: boolean;
  draggedItems: DragItem[];
  droppedItems: FormattedContent[];
}

export const useDragDrop = () => {
  const [state, setState] = useState<DragDropState>({
    isDragging: false,
    draggedItems: [],
    droppedItems: []
  })
  
  const handleDragStart = useCallback((items: DragItem[]) => {
    setState(prev => ({
      ...prev,
      isDragging: true,
      draggedItems: items
    }))
  }, [])
  
  const handleDragEnd = useCallback((dropped: boolean) => {
    setState(prev => ({
      ...prev,
      isDragging: false,
      draggedItems: []
    }))
  }, [])
  
  const handleDrop = useCallback((result: DropResult) => {
    if (result.success) {
      const formattedItems = formatDragContent(result.items)
      setState(prev => ({
        ...prev,
        droppedItems: [...prev.droppedItems, ...formattedItems]
      }))
    }
  }, [])
  
  const removeDroppedItem = useCallback((index: number) => {
    setState(prev => ({
      ...prev,
      droppedItems: prev.droppedItems.filter((_, i) => i !== index)
    }))
  }, [])
  
  const clearDroppedItems = useCallback(() => {
    setState(prev => ({
      ...prev,
      droppedItems: []
    }))
  }, [])
  
  return {
    ...state,
    handleDragStart,
    handleDragEnd,
    handleDrop,
    removeDroppedItem,
    clearDroppedItems
  }
} 